<template>
  <div class="sidebar-container">
    <el-menu
      :default-active="activeMenu"
      class="sidebar"
      @select="handleMenuSelect"
    >
      <el-menu-item index="0" data-status="0">已下单</el-menu-item>
      <el-menu-item index="1" data-status="1">商家已确认</el-menu-item>
      <el-menu-item index="2" data-status="2">已备货</el-menu-item>
      <el-menu-item index="3" data-status="3">已发货</el-menu-item>
      <el-menu-item index="4" data-status="4">已收货</el-menu-item>
      <el-menu-item index="5" data-status="5">已完成</el-menu-item>
    </el-menu>
  </div>
    
  </template>
  
  <script>
  export default {
    data() {
      return {
        activeMenu: "1", // 当前激活的菜单项
      };
    },
    methods: {
      handleMenuSelect(index) {
        // 动态获取 `status`
        const status = parseInt(index);
        this.$emit("statusChange", status); // 传递到父组件或调用方法
      },
    },
  };
  </script>
  
  <style scoped>
  /* .sidebar-container{ */
    /* width: ; */
    /* background-color: blueviolet; */
  /* } */
    .sidebar{
      width: 150px;
      height: 80%;
      margin-top: 30px;
      /* background-color: aqua; */
      display: flex;
      flex-direction: column;
      /* align-items: center; */
      justify-content:space-between;
    }
    .el-menu-item{
        display: flex;
        font-size: larger;
        /* text-align: center; */
        justify-content: center;
        align-items: center;
        /* margin-bottom: 50px; */
    }
  </style>